<script setup lang="ts">
import CodeMirror from 'vue-codemirror6'
import { json } from '@codemirror/lang-json'
import { onBeforeMount, ref, watch } from 'vue'
import { generate } from '../generator'
import { useSettingsStore } from '../store'
import { downloadTextFile, toCamelCase } from '../util'

const input = ref(`{
  "a": 1,
  "b": 1.1,
  "c": true,
  "d": {
    "a": 1,
    "dd": {
      "cc": ""
    }
  }
}`)
const output = ref('')

const regenerateOutputs = () => {
  output.value = generate(input.value, {
    generateExample: settingsStore.generateExample,
    intentSpacesNumber: settingsStore.intentSpaces,
    rootClassName: settingsStore.rootClassName,
  })
}

let handler: number | undefined = undefined
onBeforeMount(() => {
  watch(
    input,
    () => {
      if (handler !== undefined) {
        clearInterval(handler)
      }
      handler = setTimeout(() => {
        regenerateOutputs()
        handler = undefined
      }, 500)
    },
    { immediate: true }
  )
  watch(
    () => [
      settingsStore.generateExample,
      settingsStore.intentSpaces,
      settingsStore.rootClassName,
    ],
    regenerateOutputs
  )
})

const settingsStore = useSettingsStore()

const download = () => {
  downloadTextFile(
    output.value,
    toCamelCase(settingsStore.rootClassName) + '.cj'
  )
}

const copy = () => {
  navigator.clipboard.writeText(output.value)
}
</script>

<template>
  <main
    class="text-sm p-2 flex flex-col space-y-5 md:text-base lg:max-h-[calc(100vh-10rem)] lg:pt-4 lg:mx-2 lg:text-lg lg:flex-row lg:justify-between lg:space-y-0"
  >
    <div
      class="overflow-auto bg-white shadow-md flex flex-col md:flex-row lg:flex-col lg:w-56 lg:order-last lg:ml-5 lg:max-h-[calc(100vh-12rem)]"
    >
      <div class="md:flex-1 lg:flex-none">
        <div class="py-2 px-4 bg-zinc-200 font-bold">设定</div>
        <div
          class="py-2 px-4 flex flex-col shadow-md md:flex-row md:items-center md:space-x-5 lg:flex-col lg:items-stretch lg:space-x-0"
        >
          <v-text-field
            class="min-md:w-1/3"
            label="缩进"
            suffix="个空格"
            type="number"
            flex-2
            color="purple-darken-2"
            v-model="settingsStore.intentSpaces"
          />
          <v-text-field
            class="md:min-w-1/3"
            label="根节点类名"
            color="purple-darken-2"
            v-model="settingsStore.rootClassName"
          />
          <v-switch
            class="md:max-w-1/3 lg:max-w-full"
            label="生成示例代码"
            color="purple-darken-2"
            v-model="settingsStore.generateExample"
          />
        </div>
      </div>

      <div class="lg:flex-1 shadow-md md:ml-5 lg:m-none">
        <div class="py-2 px-4 bg-zinc-200 font-bold">操作</div>
        <div
          class="py-2 px-4 flex items-center justify-between md:flex-col md:items-stretch md:space-y-1"
        >
          <v-btn
            variant="outlined"
            color="purple-darken-2"
            append-icon="mdi-download"
            @click="download"
          >
            下载生成结果
          </v-btn>
          <v-btn
            color="purple-darken-2"
            append-icon="mdi-content-copy"
            @click="copy"
          >
            复制到剪贴板
          </v-btn>
        </div>
      </div>
    </div>

    <CodeMirror
      class="editor min-h-80 max-h-120 overflow-auto bg-white shadow-md lg:flex-1 lg:max-h-[calc(100vh-12rem)]"
      :lang="json()"
      v-model="input"
      basic
      wrap
    />

    <CodeMirror
      class="editor min-h-80 max-h-120 overflow-auto bg-white shadow-md lg:flex-1 lg:ml-5 lg:max-h-[calc(100vh-12rem)]"
      basic
      wrap
      readonly
      v-model="output"
    />
  </main>
</template>

<style>
.cm-editor {
  height: 100%;
}
::-webkit-scrollbar {
  display: none;
}
</style>
